{% extends 'base.html' %}

{% block title %}
	天气详情
{% endblock %}

{% block head %}
	<style>
		body {
			background-image: url('/static/bg.png');
			background-size: cover;
			color: #fefefe;
		}
	</style>

	<!-- 1.引入echarts 可以到 www.bootcdn.cn 搜 echarts -->
	<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
{% endblock %}

{% block content %}

	<div class="container mb-5">
		<!-- 标题 -->
		<div class="row my-4">
			<div class="col text-center">
				<span class="h1">{{ weather['basic']['city'] }}</span>
				<span class="h4">{{ weather['basic']['cnty'] }}</span>
			</div>
		</div>
		<!-- 实时天气 -->
		<div class="row">
			<div class="col">
				<span
					style="font-size: x-large">{{ weather['daily_forecast'][0]['tmp']['max'] }}℃ / {{ weather['daily_forecast'][0]['tmp']['min'] }}℃</span>
			</div>
			<div class="col text-end">
				<p style="font-size: x-large">
					{{ weather['daily_forecast'][0]['cond']['txt_d'] }} / {{ weather['daily_forecast'][0]['cond']['txt_n'] }}
				</p>
				<p>空气的质量: {{ weather['aqi']['city']['qlty'] }}</p>
			</div>
		</div>
		<!-- 小时气温 -->
		<div class="row border">
			{% for item in weather['hourly_forecast'] %}
				<div class="col text-center">
					<p class="my-2">{{ item['date'][-5:] }}</p>
					<p class="my-2">{{ item['tmp'] }}℃</p>
				</div>
			{% endfor %}
		</div>
		<!-- 七天天气 -->
		<div class="row row-cols-3 border mt-3">
			{% for item in weather['daily_forecast'] %}
				<div class="col text-center my-1">
					{{ item['date'] }}
				</div>
				<div class="col text-center my-1">
					{{ weather['daily_forecast'][0]['cond']['txt_d'] }} / {{ weather['daily_forecast'][0]['cond']['txt_n'] }}
				</div>
				<div class="col text-center my-1">
					{{ weather['daily_forecast'][0]['tmp']['max'] }}℃ / {{ weather['daily_forecast'][0]['tmp']['min'] }}℃
				</div>
			{% endfor %}
		</div>
		<!-- 气象信息 -->
		<div class="row text-center border mt-3">
			<div class="col-12">
				<h3 class="my-3">气象信息</h3>
			</div>
			<div class="col-6 my-2">
				<p class="my-1">{{ weather['now']['pres'] }}百帕</p>
				<p class="my-1">气压</p>
			</div>
			<div class="col-6 my-2">
				<p class="my-1">{{ weather['now']['vis'] }}千米</p>
				<p class="my-1">能见度</p>
			</div>
			<div class="col-6 my-2">
				<p class="my-1">{{ weather['now']['wind']['sc'] }}级</p>
				<p class="my-1">{{ weather['now']['wind']['dir'] }}</p>
			</div>
			<div class="col-6 my-2">
				<p class="my-1">{{ weather['now']['hum'] }}%</p>
				<p class="my-1">湿度</p>
			</div>
		</div>
		<!-- 空气质量 -->
		<div class="row text-center border mt-3 position-relative" style="position: relative">
			<div class="col-12 h3 my-3">空气质量</div>
			<div class="col-12 d-flex justify-content-center">
				<!-- 2.包装图表的 div -->
				<div id="p" style="width: 230px; height: 230px">
				</div>
				<!-- 3.根据 id 初始化图表到 div  -->
				<script type="text/javascript">
          echarts.init(document.getElementById('p')).setOption({{ pie | safe }});
				</script>
			</div>
			<div style="position: absolute; top:142px">
				<p class="my-1 fs-2">{{ weather['aqi']['city']['qlty'] }}</p>
				<p class="my-1">{{ weather['aqi']['city']['aqi'] }}</p>
			</div>
			<div class="col-4 my-2">
				<p class="my-1">{{ weather['aqi']['city']['pm25'] }}</p>
				<p class="my-1">细微颗粒物</p>
			</div>
			<div class="col-4 my-2">
				<p class="my-1">{{ weather['aqi']['city']['no2'] }}</p>
				<p class="my-1">二氧化氮</p>
			</div>
			<div class="col-4 my-2">
				<p class="my-1">{{ weather['aqi']['city']['o3'] }}</p>
				<p class="my-1">臭氧</p>
			</div>
			<div class="col-4 my-2">
				<p class="my-1">{{ weather['aqi']['city']['pm10'] }}</p>
				<p class="my-1">可吸入颗粒物</p>
			</div>
			<div class="col-4 my-2">
				<p class="my-1">{{ weather['aqi']['city']['co'] }}</p>
				<p class="my-1">一氧化碳</p>
			</div>
			<div class="col-4 my-2">
				<p class="my-1">{{ weather['aqi']['city']['so2'] }}</p>
				<p class="my-1">二氧化硫</p>
			</div>
		</div>
		<!-- 日出日落 -->
		<div class="row row-cols-2 text-center border mt-3">
			<div class="col-12 h3 my-3">日出日落</div>
			<i class="bi-sunrise col" style="font-size: 3rem"></i>
			<i class="bi-sunset col" style="font-size: 3rem"></i>
			<div class="col" style="margin: -10px 0 16px 0">
				日出: {{ weather['daily_forecast'][0]['astro']['sr'] }}
			</div>
			<div class="col" style="margin: -10px 0 16px 0">
				日落: {{ weather['daily_forecast'][0]['astro']['ss'] }}
			</div>
		</div>
		<!-- 生活指数 -->
		<div class="row row-cols-3 text-center border mt-3">
			<div class="h3 col-12 my-3">生活指数: {{ weather['suggestion']['air']['brf'] }}
			</div>
			<div class="col my-3">
				<div>
					<i class="bi-emoji-smile" style="color: burlywood; font-size: 3rem"></i>
				</div>
				<div>舒适度指数</div>
				<div>{{ weather['suggestion']['comf']['brf'] }}</div>
			</div>
			<div class="col my-3">
				<div>
					<i class="bi-droplet" style="color: cadetblue; font-size: 3rem"></i>
				</div>
				<div>洗车指数</div>
				<div>{{ weather['suggestion']['cw']['brf'] }}</div>
			</div>
			<div class="col my-3">
				<div style="height: 74px; line-height: 74px">
					<img src="/static/衣服.svg" alt="Bootstrap" width="48" height="48">
				</div>
				<div>穿衣指数</div>
				<div>{{ weather['suggestion']['drsg']['brf'] }}</div>
			</div>
			<div class="col my-3">
				<div style="height: 74px; line-height: 74px">
					<img src="/static/运动.svg" alt="Bootstrap" width="48" height="48">
				</div>
				<div>运动指数</div>
				<div>{{ weather['suggestion']['sport']['brf'] }}</div>
			</div>
			<div class="col my-3">
				<div style="height: 74px; line-height: 74px">
					<svg t="1622383643250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4995" width="48" height="48"><path d="M662 565.2H552.9v-109c0-22.5-18.4-40.9-40.9-40.9s-40.9 18.4-40.9 40.9v109.1H362c-22.5 0-40.9 18.4-40.9 40.9s18.4 40.9 40.9 40.9h109.1v109.1c0 22.5 18.4 40.9 40.9 40.9s40.9-18.4 40.9-40.9V647.1H662c22.5 0 40.9-18.4 40.9-40.9s-18.4-41-40.9-41z" fill="#FFFF27" p-id="4996"></path><path d="M512 810.7c-30.1 0-54.5-24.5-54.5-54.5v-95.5H362c-30.1 0-54.5-24.5-54.5-54.5s24.5-54.5 54.5-54.5h95.5v-95.5c0-30.1 24.5-54.5 54.5-54.5 30.1 0 54.5 24.5 54.5 54.5v95.5H662c30.1 0 54.5 24.5 54.5 54.5S692 660.7 662 660.7h-95.5v95.5c0 30-24.4 54.5-54.5 54.5zM362 578.9c-15 0-27.3 12.2-27.3 27.3s12.2 27.3 27.3 27.3h109.1c7.5 0 13.6 6.1 13.6 13.6v109.1c0 15 12.2 27.3 27.3 27.3 15 0 27.3-12.2 27.3-27.3V647.1c0-7.5 6.1-13.6 13.6-13.6H662c15 0 27.3-12.2 27.3-27.3S677 578.9 662 578.9H552.9c-7.5 0-13.6-6.1-13.6-13.6V456.2c0-15-12.2-27.3-27.3-27.3-15 0-27.3 12.2-27.3 27.3v109.1c0 7.5-6.1 13.6-13.6 13.6H362z" fill="#41B3F9" p-id="4997"></path><path d="M880.2 937.9H143.8c-45.1 0-81.8-36.7-81.8-81.8V356.2c0-45.1 36.7-81.8 81.8-81.8h736.4c45.1 0 81.8 36.7 81.8 81.8V856c0 45.2-36.7 81.9-81.8 81.9zM143.8 301.7c-30.1 0-54.5 24.5-54.5 54.5V856c0 30.1 24.5 54.5 54.5 54.5h736.4c30.1 0 54.5-24.5 54.5-54.5V356.2c0-30.1-24.5-54.5-54.5-54.5H143.8z" fill="#41B3F9" p-id="4998"></path><path d="M721 301.7H303c-7.5 0-13.6-6.1-13.6-13.6V172.5c0-47.6 38.7-86.4 86.4-86.4h272.5c47.6 0 86.4 38.7 86.4 86.4v115.6c-0.1 7.5-6.2 13.6-13.7 13.6z m-404.3-27.3h390.7V172.5c0-32.6-26.5-59.1-59.1-59.1H375.7c-32.6 0-59.1 26.5-59.1 59.1v101.9z" fill="#41B3F9" p-id="4999"></path><path d="M246.7 299.9h-58.4c-7.5 0-13.6-6.1-13.6-13.6v-20.4c0-7.5 6.1-13.6 13.6-13.6h58.4c7.5 0 13.6 6.1 13.6 13.6v20.4c0 7.5-6.1 13.6-13.6 13.6zM835.8 299.9h-58.4c-7.5 0-13.6-6.1-13.6-13.6v-20.4c0-7.5 6.1-13.6 13.6-13.6h58.4c7.5 0 13.6 6.1 13.6 13.6v20.4c0 7.5-6.1 13.6-13.6 13.6z" fill="#41B3F9" p-id="5000"></path></svg>
				</div>
				<div>感冒指数</div>
				<div>{{ weather['suggestion']['flu']['brf'] }}</div>
			</div>
			<div class="col my-3">
				<div style="height: 74px; line-height: 74px">
					<svg t="1622383724528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6052" width="48" height="48"><path d="M885.76 921.28h-106.56l-0.32-26.77333333c0.10666667-0.74666667-0.10666667-68.26666667-7.46666667-171.52-8.96-125.65333333-21.76-243.41333333-167.57333333-334.82666667l24.53333333-26.02666667c78.72 46.93333333 146.24 112 178.88 167.36 42.34666667 72 56.85333333 110.29333333 69.54666667 176.85333334 21.65333333 112.64 9.49333333 211.30666667 8.96 214.93333333z" fill="#755E49" p-id="6053"></path><path d="M565.65333333 893.40444445c0 14.93333333-1.38666667 29.44-4.05333333 43.52H129.28c-2.66666667-14.08-4.05333333-28.69333333-4.05333333-43.52 0-25.81333333 4.26666667-50.66666667 11.94666666-73.81333334 29.76-88.64 111.78666667-152.32 208.21333334-152.32 96.42666667 0 178.45333333 63.68 208.21333333 152.32 7.89333333 23.14666667 12.05333333 48 12.05333333 73.81333334z" fill="#FF9D00" p-id="6054"></path><path d="M989.12 926.61333333c0 16.21333333-6.61333333 30.82666667-17.17333333 41.49333334-10.56 10.66666667-25.28 17.17333333-41.49333334 17.17333333h-838.4c-32.42666667 0-58.66666667-26.24-58.66666666-58.66666667 0-16.21333333 6.61333333-30.82666667 17.17333333-41.49333333 10.66666667-10.56 25.28-17.17333333 41.49333333-17.17333333h838.4c32.42666667 0 58.66666667 26.24 58.66666667 58.66666666z" fill="#00B7FF" p-id="6055"></path><path d="M981.86666667 399.57333333c10.45333333 0 14.50666667-17.17333333 5.86666666-24.42666666-31.14666667-26.24-91.73333333-64.21333333-181.01333333-64.74666667-89.92-0.64-150.29333333 38.50666667-180.90666667 65.28-8.53333333 7.46666667-4.37333333 24.32 5.97333334 24.32l350.08-0.42666667z" fill="#02C652" p-id="6056"></path><path d="M882.77333333 158.61333333c7.36-7.36-1.81333333-22.4-13.12-21.44-40.64 3.52-110.29333333 19.52-173.76 82.24-64 63.14666667-79.04 133.44-81.81333333 174.08-0.74666667 11.30666667 14.08 20.37333333 21.44 13.01333334l247.25333333-247.89333334z" fill="#02C652" p-id="6057"></path><path d="M648 391.89333333c7.36-7.36-1.81333333-22.4-13.12-21.44-40.64 3.52-110.29333333 19.52-173.76 82.24-64 63.14666667-79.04 133.44-81.81333333 174.08-0.74666667 11.30666667 14.08 20.37333333 21.44 13.01333334l247.25333333-247.89333334z" fill="#02C652" p-id="6058"></path><path d="M657.92 44.69333333c0-10.45333333-17.17333333-14.50666667-24.42666667-5.86666666-26.24 31.14666667-64.21333333 91.73333333-64.74666666 181.01333333-0.64 89.92 38.50666667 150.29333333 65.28 180.90666667 7.46666667 8.53333333 24.32 4.37333333 24.32-5.97333334l-0.42666667-350.08z" fill="#02C652" p-id="6059"></path><path d="M657.92 372.58666667c0-10.45333333-17.17333333-14.50666667-24.42666667-5.86666667-26.24 31.14666667-64.21333333 91.73333333-64.74666666 181.01333333-0.64 89.92 38.50666667 150.29333333 65.28 180.90666667 7.46666667 8.53333333 24.32 4.37333333 24.32-5.97333333l-0.42666667-350.08z" fill="#02C652" p-id="6060"></path><path d="M642.66666667 402.24c10.45333333 0 14.50666667-17.17333333 5.86666666-24.42666667-31.14666667-26.24-91.73333333-64.21333333-181.01333333-64.74666666-89.92-0.64-150.29333333 38.50666667-180.90666667 65.28-8.53333333 7.46666667-4.37333333 24.32 5.97333334 24.32l350.08-0.42666667z" fill="#02C652" p-id="6061"></path></svg>
				</div>
				<div>旅游指数</div>
				<div>{{ weather['suggestion']['trav']['brf'] }}</div>
			</div>
			<div class="col my-3">
				<div>
					<i class="bi-sunglasses" style="color: blueviolet; font-size: 3rem"></i>
				</div>
				<div>紫外线指数</div>
				<div>{{ weather['suggestion']['uv']['brf'] }}</div>
			</div>

		</div>

	</div>

{% endblock %}
